{% extends "base.html" %}
{% load i18n %}

{% block headtitle %}{% trans "404 - Page Not Found" %}{% endblock %}

{% block head %}
<style>
@-webkit-keyframes spin {
 0% {
   -webkit-transform: rotateY(0deg);
 }
 100% {
   -webkit-transform: rotateY(-360deg);
 }
}
@-moz-keyframes spin {
 0% {
   -moz-transform: rotateY(0deg);
 }
 100% {
   -moz-transform: rotateY(-360deg);
 }
}
#oops {
  text-align: center;
  margin-top: 7em;
  -webkit-perspective: 500px;
  -webkit-transform-style: preserves-3d;
  -moz-perspective: 500px;
  -moz-transform-style: preserves-3d;
}
#oops img {
  width: 256px;
  height: 256px;
  -webkit-animation-name: spin;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 2s;
  -moz-animation-name: spin;
  -moz-animation-duration: 5s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-delay: 2s;
}
#oops:hover img {
  -webkit-animation-duration: 500ms;
  -moz-animation-duration: 500ms;
}
</style>
{% endblock %}

{% block body %}
<div id="oops">
  <img src="/static/images/identity/HTML5_Badge_256.png"
       title="{% trans "I pity da foo who doesn't use HTML5!" %}"
       alt="{% trans "I pity da foo who doesn't use HTML5!" %}"
       width="256" height="256"/>
  <h2>{% trans "Oops!! We didn't find any HTML5 resources for ya." %}</h2>
</div>
{% endblock %}
